import React, { memo, useCallback } from 'react'
import EntireRoomsWrapper from './style'
import { shallowEqual, useDispatch, useSelector } from 'react-redux'
import RoomItem from '@/components/room-item'
import { useNavigate } from 'react-router-dom'
import { changeGetDetailAction } from '@/store/modules/detail'


const EntireRooms = memo(() => {
  

  const {roomList,totalCount,isLoading} = useSelector((state) => ({
    roomList: state.entire.roomList,
    totalCount: state.entire.totalCount,
    isLoading: state.entire.isLoading,
  }),shallowEqual)

  const navigate = useNavigate()
  const dispatch = useDispatch()
  const clickHandle = useCallback((itemData) => {
    dispatch(changeGetDetailAction(itemData))
    navigate('/detail')
  },[navigate,dispatch])

  return (
    <EntireRoomsWrapper>
      <h2>共<span>{totalCount}</span>多处住所</h2>
      <div className="list">
        {
          roomList.map(item => {
            return <RoomItem 
            itemData={item} 
            key={item.id} 
            itemrWidth="20%"
            itemClick={clickHandle}
            />
          })
        }
      </div>
      {isLoading&&<div className="cover"></div>}
    </EntireRoomsWrapper>
  )
})

export default EntireRooms